<template>
  <h5>投诉纠纷分析</h5>
  <el-form
    ref="queryFormRef"
    :inline="true"
    :model="queryParams"
    class="mb-15px"
    label-width="auto"
    label-position="right"
    @submit.prevent
  >
    <el-form-item label="创建时间" prop="createTime">
      <el-date-picker
        v-model="queryParams.time"
        class="!w-240px"
        end-placeholder="结束日期"
        start-placeholder="开始日期"
        type="daterange"
        value-format="YYYY-MM-DD"
        @change="handleTime"
      />
    </el-form-item>
    <el-form-item label="分类" prop="category">
      <el-select v-model="params.type" def class="!w-240px" placeholder="请选择分类">
        <el-option
          v-for="dict in typeList"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="科室" prop="organize">
      <el-tree-select
        v-model="params.departId"
        :data="queryParams.list"
        check-strictly="true"
        class="!w-240px"
        placeholder="请选择科室"
      />
    </el-form-item>
    <el-form-item>
      <el-button @click="getData">
        <Icon class="mr-5px" icon="ep:search" />
        筛选
      </el-button>
      <el-button @click="handleReset">
        <Icon class="mr-5px" icon="ep:refresh" />
        重置
      </el-button>
    </el-form-item>
  </el-form>
  <!-- 操作栏 -->
  <div class="flex justify-between">
    <div class="flex-1 border border-solid border-[#636466]">
      <div class="flex justify-center items-center mt-5">
        <Icon icon="mdi:account-supervisor" color="#2f6dcc" class="mr-32px" :size="48" />
        <div class="flex flex-col items-center">
          <div class="text-green-800 text-[32px] font-bold mb-4">{{ data.totalCount }}</div>
          <div>总人次</div>
        </div>
      </div>
      <div class="flex-1 h-[1px] mt-4 bg-[#636466]"></div>
      <div class="flex items-center justify-around h-[48px]">
        <div>投诉：{{ data.complaint0 }}</div>
        <div>纠纷：{{ data.complaint1 }}</div>
        <div>投诉转纠纷：{{ data.complaintChange }}</div>
      </div>
    </div>
    <div class="flex-1 border border-solid border-[#636466] ml-2">
      <div class="flex justify-center items-center mt-5">
        <Icon icon="ep:office-building" color="#2f6dcc" class="mr-32px" :size="48" />
        <div class="flex flex-col items-center">
          <div class="text-green-800 text-[32px] font-bold mb-4">{{
            data.dealType0SuccessRateStr
          }}</div>
          <div>院内调节成功率</div>
        </div>
      </div>
      <div class="flex-1 h-[1px] mt-4 bg-[#636466]"></div>
      <div class="flex items-center justify-around h-[48px]">
        <div>成功次数：{{ data.dealType0Success }}</div>
      </div>
    </div>
    <div class="flex-1 border border-solid border-[#636466] ml-2">
      <div class="flex justify-center items-center mt-5">
        <Icon icon="mdi:account-multiple-check" color="#2f6dcc" class="mr-32px" :size="48" />
        <div class="flex flex-col items-center">
          <div class="text-green-800 text-[32px] font-bold mb-4">{{ data.dealType2 }}</div>
          <div>行政调节次数</div>
        </div>
      </div>
      <div class="flex-1 h-[1px] mt-4 bg-[#636466]"></div>
      <div class="flex items-center justify-around h-[48px]">
        <div>成功次数：{{ data.dealType2Success }}</div>
      </div>
    </div>
    <div class="flex-1 border border-solid border-[#636466] ml-2">
      <div class="flex justify-center items-center mt-5">
        <Icon icon="mdi:bank" color="#2f6dcc" class="mr-32px" :size="48" />
        <div class="flex flex-col items-center">
          <div class="text-green-800 text-[32px] font-bold mb-4">{{ data.dealType3 }}</div>
          <div>法院调节次数</div>
        </div>
      </div>
      <div class="flex-1 h-[1px] mt-4 bg-[#636466]"></div>
      <div class="flex items-center justify-around h-[48px]">
        <div>胜诉：{{ data.dealType3Success }}</div>
        <div>败诉：{{ data.dealType3Failed }}</div>
        <div>未判决：{{ data.dealType3Unknown }}</div>
      </div>
    </div>
    <div class="flex-1 border border-solid border-[#636466] ml-2">
      <div class="flex justify-center items-center mt-5">
        <Icon icon="mdi:bank" color="#2f6dcc" class="mr-32px" :size="48" />
        <div class="flex flex-col items-center">
          <div class="text-green-800 text-[32px] font-bold mb-4">{{ data.status2RateStr }}</div>
          <div>办结率</div>
        </div>
      </div>
      <div class="flex-1 h-[1px] mt-4 bg-[#636466]"></div>
      <div class="flex items-center justify-around h-[48px]">
        <div>办结次数：{{ data.status2 }}</div>
      </div>
    </div>
    <div class="flex-1 border border-solid border-[#636466] ml-2">
      <div class="flex justify-center items-center mt-5">
        <Icon icon="mdi:bank" color="#2f6dcc" class="mr-32px" :size="48" />
        <div class="flex flex-col items-center">
          <div class="text-green-800 text-[32px] font-bold mb-4">{{ data.payRateStr }}</div>
          <div>赔付案例率</div>
        </div>
      </div>
      <div class="flex-1 h-[1px] mt-4 bg-[#636466]"></div>
      <div class="flex items-center justify-around h-[48px]">
        <div>赔付次数：{{ data.payCount }}</div>
      </div>
    </div>
  </div>
  <div class="flex mt-4">
    <div class="flex-1 border border-solid border-[#636466]">
      <div class="flex w-full">
        <div class="mt-[45px] ml-[18px] whitespace-nowrap">科室分布</div>
        <div id="echarts1" class="echarts1" ref="echarts1"></div>
      </div>
    </div>
    <div class="flex-1 border border-solid border-[#636466] ml-2">
      <div class="flex w-full">
        <div class="mt-[45px] ml-[18px] whitespace-nowrap">事件等级分布</div>
        <div id="echarts2" class="echarts1" ref="echarts2"></div>
      </div>
    </div>
  </div>
  <div class="flex mt-4">
    <div class="flex-1 border border-solid border-[#636466]">
      <div class="flex w-full">
        <div class="mt-[45px] ml-[18px] whitespace-nowrap">发生趋势</div>
        <div id="echarts3" class="echarts1" ref="echarts3"></div>
      </div>
    </div>
    <div class="flex-1 border border-solid border-[#636466] ml-2">
      <div class="flex w-full">
        <div class="mt-[45px] ml-[18px] whitespace-nowrap">处理结果</div>
        <div id="echarts4" class="echarts1" ref="echarts4"></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="tsx">
import type { Column } from 'element-plus'
import * as echarts from 'echarts'
import * as DisputeApi from '@/api/dispute/index'
import * as DeptApi from '@/api/system/dept'
import { handleTree } from '@/utils/tree'
defineOptions({ name: 'SystemComplaint' })
const queryParams: any = ref({
  time: [],
  list: []
})
const echarts1 = ref()
const echarts2 = ref()
const echarts3 = shallowRef()
const echarts4 = ref()
const params = ref({
  startCreateTime: '',
  endCreateTime: '',
  type: 'all',
  departId: '',
  orgId: ''
})
const typeList = ref([
  { value: 'all', label: '所有分类' },
  { value: '0', label: '投诉' },
  { value: '1', label: '纠纷' }
])
const data: any = ref({})
const handleTime = (v) => {
  if (v.length > 1) {
    params.value.startCreateTime = v[0]
    params.value.endCreateTime = v[1]
  }
}

const getGroupListTrees = (data: any) => {
  if (Array.isArray(data)) {
    return data.map((item) => getGroupListTrees(item))
  } else if (typeof data === 'object' && data !== null) {
    const result: any = {}
    for (let key in data) {
      if (key === 'name') {
        result.label = data[key]
      } else if (key === 'id') {
        result.value = String(data[key])
      } else {
        result[key] = getGroupListTrees(data[key])
      }
    }
    return result
  } else {
    return data
  }
}
/** 查询部门列表 */
const getList = async () => {
  const data = await DeptApi.getDeptTree()
  queryParams.value.list = getGroupListTrees(data.tree)
}
const queryFormRef = ref()
const handleReset = () => {
  params.value = {
    startCreateTime: '',
    endCreateTime: '',
    type: 'all',
    departId: '',
    orgId: ''
  }
  queryParams.value.time = []
  queryFormRef.value?.resetFields()
  getData()
}

const getData = async () => {
  const param = {
    ...params.value,
    type: params.value.type == 'all' ? '' : params.value.type
  }
  const res = await DisputeApi.getData(param)
  data.value = res.result
  init()
  init2()
  init3()
  init4()
}

const init = () => {
  const xData = data.value.departCountList.map((v) => {
    return v.departName
  })
  const yData = data.value.departCountList.map((v) => {
    return v.departCount
  })
  // 基于准备好的dom，初始化echarts实例
  echarts1.value = echarts.init(document.getElementById('echarts1'))
  const option = {
    xAxis: {
      data: xData,
      axisLabel: {
        interval: 0
      }
    },
    yAxis: {
      axisLine: {
        show: false // 是否显示Y轴线
      }
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        data: yData,
        type: 'bar',
        itemStyle: {
          // 通常情况下：
          color: '#2f6dcc'
        }
      }
    ]
  }
  echarts1.value.setOption(option)
}
const init2 = () => {
  const xData = data.value.levelCountList.map((v) => {
    return { value: v.levelCount, name: v.levelName }
  })
  // 基于准备好的dom，初始化echarts实例
  echarts2.value = echarts.init(document.getElementById('echarts2'))
  const option = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: xData
      }
    ]
  }
  echarts2.value.setOption(option)
}
const init3 = () => {
  const xData = data.value.moneyCountList.map((v) => {
    return v.date
  })
  const yData1 = data.value.moneyCountList.map((v) => {
    return v.total
  })
  const yData2 = data.value.moneyCountList.map((v) => {
    return v.totalMoney
  })
  // 基于准备好的dom，初始化echarts实例
  echarts3.value = echarts.init(document.getElementById('echarts3'))
  const option = {
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xData,
      axisLabel: {
        interval: 0,
        rotate: 45
      }
    },
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '人次',
        type: 'line',
        stack: 'Total',
        data: yData1
      },
      {
        name: '赔偿金',
        type: 'line',
        stack: 'Total',
        data: yData2
      }
    ]
  }

  echarts3.value.setOption(option)
}
const init4 = () => {
  const xData = data.value.dealStatusList.map((v) => {
    return v.statusName
  })
  const yData = data.value.dealStatusList.map((v) => {
    return v.levelCount
  })
  // 基于准备好的dom，初始化echarts实例
  echarts4.value = echarts.init(document.getElementById('echarts4'))
  const option = {
    xAxis: {
      data: xData,
      axisLabel: {
        interval: 0
      }
    },
    yAxis: {
      axisLine: {
        show: false // 是否显示Y轴线
      }
    },
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        data: yData,
        type: 'bar',
        itemStyle: {
          // 通常情况下：
          color: '#2f6dcc'
        }
      }
    ]
  }
  echarts4.value.setOption(option)
}
/** 初始化 **/
onMounted(() => {
  getList()
  getData()
})
</script>
<style lang="scss" scoped>
.echarts1 {
  position: relative;
  min-width: 80%;
  height: 500px;
}
</style>
